<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <link href="../../dist/css/mobiscroll.css" rel="stylesheet">
    <script src="../../dist/js/mobiscroll.javascript.js"></script>

</head>

<body>
    <div mbsc-page>
        <div mbsc-form>
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Account information</div>
                <div class="mbsc-grid mbsc-no-padding">
                    <div class="mbsc-row">
                        <div class="mbsc-col-sm-6">
                            <label>
                                First Name
                                <input mbsc-input type="text" id="first" data-label-style="floating"
                                    placeholder="What's your first name?" />
                            </label>
                            <label>
                                Last Name
                                <input mbsc-input type="text" id="last" data-label-style="floating"
                                    placeholder="What's your last name?" />
                            </label>
                        </div>
                        <div class="mbsc-col-sm-6">
                            <label>
                                Email
                                <input mbsc-input type="email" id="email" data-label-style="floating"
                                    placeholder="me@domain.com" />
                            </label>
                            <label>
                                Password
                                <input mbsc-input type="password" id="password" data-label-style="floating"
                                    placeholder="Minimum 6 characters" data-password-toggle="true" />
                            </label>
                        </div>
                    </div>
                </div>
                <label>
                    Rating
                    <input mbsc-rating value="4" />
                </label>
            </div>

            <div class="mbsc-form-group" data-collapsible>
                <div class="mbsc-form-group-title">About you</div>
                <div class="mbsc-form-group-content">
                    <label>
                        Male
                        <input mbsc-segmented type="radio" name="gender" checked>
                    </label>
                    <label>
                        Female
                        <input mbsc-segmented type="radio" name="gender">
                    </label>
                    <div>
                        <label for="height">Height (cm)</label>
                        <input mbsc-stepper id="height" type="number" data-val="left" min="130" max="220" step="1"
                            value="170" />
                    </div>
                    <div>
                        <label for="weight">Weight (kg)</label>
                        <input mbsc-stepper id="weight" type="number" data-val="left" min="30" max="180" step="1"
                            value="85" />
                    </div>
                </div>
            </div>

            <div class="mbsc-form-group" data-collapsible>
                <div class="mbsc-form-group-title">General settings</div>
                <div class="mbsc-form-group-content">
                    <label>
                        <input mbsc-switch type="checkbox"> Indoor/Treadmill
                    </label>
                    <label>
                        <input mbsc-switch type="checkbox" checked> Auto-Pause Run
                        <span class="mbsc-desc">Automatically pause workout when you stop moving. This is useful if you
                            don't want to manually pause and resume.</span>
                    </label>
                </div>
            </div>

            <div class="mbsc-form-group" data-collapsible>
                <div class="mbsc-form-group-title">On screen</div>
                <div class="mbsc-form-group-content">
                    <label>
                        <input mbsc-switch type="checkbox" checked> Heart Rate
                    </label>
                    <label>
                        <input mbsc-switch type="checkbox"> Cheers
                    </label>
                    <label>
                        Show current pace
                        <input mbsc-segmented type="radio" name="pace" checked>
                    </label>
                    <label>
                        Show average pace
                        <input mbsc-segmented type="radio" name="pace">
                    </label>
                </div>
            </div>

            <div class="mbsc-form-group" data-collapsible>
                <div class="mbsc-form-group-title">Run countdown</div>
                <div class="mbsc-form-group-content">
                    <label>
                        <input mbsc-radio type="radio" name="group"> Off
                    </label>
                    <label>
                        <input mbsc-radio type="radio" name="group" checked> 3 seconds
                    </label>
                    <label>
                        <input mbsc-radio type="radio" name="group"> 6 seconds
                    </label>
                    <label>
                        <input mbsc-radio type="radio" name="group"> 9 seconds
                    </label>
                </div>
            </div>

            <div class="mbsc-btn-group-block">
                <button mbsc-button>Save Settings</button>
            </div>
        </div>
    </div>

</body>

</html>